<template>
<div class="main">
  <el-dialog
  :visible.sync="mapDisplay"
  width="58%">
  <div style="width:100%;height:450px">
    <MapContainer></MapContainer>
  </div>

  </el-dialog>
  <el-dialog
  title="修改信息"
  :visible.sync="oneDialogVisible"
  width="50%">
  <el-form :model="updateInfo" :inline="true" ref="myinfo" :rules="rule" label-width="80px" >
    <el-form-item label="真实姓名" prop="t_real_name">
    <el-input v-model="updateInfo.t_real_name"></el-input>
  </el-form-item>
  <el-form-item label="手机号" prop="t_phone">
    <el-input v-model="updateInfo.t_phone"></el-input>
  </el-form-item>
  <el-form-item label="性别">
    <el-radio-group v-model="updateInfo.t_sex" style="width:200px">
      <el-radio label="男"></el-radio>
      <el-radio label="女"></el-radio>
    </el-radio-group>
  </el-form-item>
  <el-form-item label="民族">
    <el-input v-model="updateInfo.native_place"></el-input>
  </el-form-item>
  <el-form-item label="毕业学校">
    <el-input v-model="updateInfo.t_university"></el-input>
  </el-form-item>
  <el-form-item label="专业">
    <el-input  v-model="updateInfo.major"></el-input>
  </el-form-item>
  <el-form-item label="出生日期">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="出生日期" v-model="updateInfo.birth" style="width: 202px;"></el-date-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="电子邮箱">
    <el-input v-model="updateInfo.t_email"></el-input>
  </el-form-item>
  <el-form-item label="联系地址" >
    <el-input v-model="updateInfo.t_addr" style="width:438px;"></el-input><el-button style="font-size:20px" @click="openMap" type="primary" size="mini" icon="el-icon-position"></el-button>
  </el-form-item>
  <el-form-item>
    <el-button size="mini" style="background:green;color:#fff" @click="sendOk">提交</el-button>
  </el-form-item>
  </el-form>
</el-dialog>
<el-dialog
  title="修改密码"
  :visible.sync="twoDialogVisible"
  width="38%">
  <el-form :rules="rule" :model="info" ref="mypassword"  label-width="80px">
    <el-form-item label="用户名">
    <el-input disabled v-model="info.t_username"></el-input>
   </el-form-item>
   <el-form-item label="新密码" prop="t_password">
    <el-input v-model="info.t_password"></el-input>
   </el-form-item>
   <el-form-item>
    <el-button @click="sendFor">提交</el-button>
  </el-form-item>
  </el-form>
</el-dialog>
  <el-descriptions title="基础信息" direction="vertical" :column="5" border>
  <el-descriptions-item label="用户名">{{info.t_username}}</el-descriptions-item>
  <el-descriptions-item label="真实姓名">{{info.t_real_name}}</el-descriptions-item>
  <el-descriptions-item label="手机号码">{{info.t_phone}}</el-descriptions-item>
  <el-descriptions-item label="性别">{{info.t_sex? info.t_sex:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="备注">
    <el-tag size="small">教师</el-tag>
  </el-descriptions-item>
  <el-descriptions-item label="民族">{{info.native_place? info.native_place:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="毕业院校">{{info.t_university? info.t_university:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="专业">{{info.major? info.major:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="生日">{{info.birth? (info.birth+'').slice(0,10):'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="电子邮箱">{{info.birth? info.t_email:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="支教次数">{{info.t_count? info.t_count:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="联系地址" :span="2">{{info.t_addr? info.t_addr:'暂无数据'}}</el-descriptions-item>
  <el-descriptions-item label="操作" :span="2">
    <el-tooltip content="修改信息" placement="top"><el-button @click="changeInfo" type="primary" icon="el-icon-edit"></el-button></el-tooltip>
    <el-tooltip content="修改密码" placement="top"><el-button @click="changePassword" type="primary" icon="el-icon-setting"></el-button></el-tooltip>
  </el-descriptions-item>
  <el-descriptions-item label="头像"><img style="width:128px;height:128px" :src="evUrl+(imgVal || mgsSrc)" alt=""></el-descriptions-item>
  <el-descriptions-item label="简历">
    <div style="display:flex">
      <el-tooltip v-if="pdfUrl || info.my_notes" style="font-size:18px;margin-right:3px" content="预览" placement="top"><el-button @click="seeNotes" size="mini" icon="el-icon-view"></el-button></el-tooltip>
      <el-tooltip style="margin-right:3px" content="上传" placement="top">
        <el-upload
        ref="upPdf"
        :action="evUrl+'zj/upNotes'"
        accept=".pdf"
        :data="notesInfo"
        :on-success="sendSuccess"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload">
           <el-button style="font-size:18px" size="mini" icon="el-icon-paperclip">
           </el-button>
        </el-upload>
      </el-tooltip>
      <el-tooltip v-if="pdfUrl || info.my_notes" style="font-size:18px;margin-right:3px" content="删除" placement="top"><el-button @click="againDeleteNotes" size="mini" icon="el-icon-delete"></el-button></el-tooltip>
    </div>
  </el-descriptions-item>
</el-descriptions>
</div>

</template>
<script>
import { getTeacherInfo, upTeacherInfo } from '../api/index.js'
import { upYouPass, deleteNotes } from '../api/info.js'
import MapContainer from '../components/MapContainer'

export default {
  components: { MapContainer },
  data () {
    return {
      evUrl: this.$evUrl,
      info: {},
      updateInfo: {},
      mgsSrc: '',
      imgVal: '',
      oneDialogVisible: false,
      twoDialogVisible: false,
      notesInfo: {
        tId: ''
      },
      pdfUrl: '',
      mapDisplay: false,
      rule: {
        t_real_name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        t_phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '长度在 3 到 18 个字符', trigger: 'blur' }
        ],
        t_password: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 3, max: 18, message: '长度在 3 到 18 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 打开地图
    openMap () {
      this.mapDisplay = true
    },
    getSchoolD () {
      const tId = window.localStorage.getItem('id')
      this.notesInfo.tId = tId
      getTeacherInfo({ tId: tId }).then(({ data }) => {
        this.info = { ...data.info, t_password: '' }
        // console.log(data.info)
      })
      // console.log(tId)
    },
    // 修改信息
    changeInfo () {
      this.updateInfo = JSON.parse(JSON.stringify(this.info))
      this.oneDialogVisible = true
    },
    // 修改密码
    changePassword () {
      this.twoDialogVisible = true
    },
    // 提交修改信息
    sendOk () {
      // console.log('已经提交')
      this.$refs.myinfo.validate((valid) => {
        if (valid) {
          // console.log('good')
          upTeacherInfo(this.updateInfo).then(({ data }) => {
            this.$message.info(data.message)
            this.getSchoolD()
          })
          this.oneDialogVisible = false
        } else {
          this.$message.info('请正确填写表单')
        }
      })
    },
    // 提交修改密码
    sendFor () {
      // console.log('123458151521')
      this.$refs.mypassword.validate((valid) => {
        if (valid) {
          // console.log('goodday')
          upYouPass({ role: '1', password: this.info.t_password, username: this.info.t_username }).then(({ data }) => {
            // console.log(data)
            this.$message.info(data.message)
          })
          this.twoDialogVisible = false
          this.info.t_password = ''
        } else {
          this.$message.info('请正确填写表单')
        }
      })
    },
    // 上传简历前
    beforeAvatarUpload (file) {
      const isPdf = file.type === 'application/pdf'
      // console.log(isPdf, file.type, file)
      if (!isPdf) {
        this.$message.error('只能是 pdf 格式!')
        return this.$refs.upPdf.clearFiles()
      } else {
        this.deleteNotes()
      }
    },
    // 上传成功
    sendSuccess (response, file) {
      // console.log(response, file)
      this.$message.success(response.message)
      this.$refs.upPdf.clearFiles()
      this.$store.commit('savePdfUrl', response.Pdfurl)
      this.pdfUrl = this.$store.state.tab.pdfUrl
    },
    // 预览简历
    seeNotes () {
      window.open(this.evUrl + (this.pdfUrl || this.info.my_notes))
    },
    // 删除简历
    deleteNotes () {
      deleteNotes({ tId: this.notesInfo.tId }).then(({ data }) => {
        // this.$message.info(data.message)
        this.info.my_notes = ''
        this.pdfUrl = ''
      })
    },
    // 删除简历again
    againDeleteNotes () {
      this.deleteNotes()
      this.$message.info('删除成功')
    }
  },
  // 监听vuex数据变化
  watch: {
    '$store.state.tab.userImage' (newVal, oldVal) {
      // 对数据执行操作
      // console.log(newVal, oldVal)
      this.imgVal = newVal
    },
    '$store.state.tab.our_addr' (newVal, oldVal) {
      // 对数据操作
      // console.log(newVal, oldVal)
      this.updateInfo.t_addr = newVal.address
      this.mapDisplay = false
    },
    deep: true
  },

  mounted () {
    this.getSchoolD()
    this.mgsSrc = window.localStorage.getItem('imageSrc')
  }
}
</script>
<style scoped>

</style>
